<!--
 * @Description: 标题1组件
 * @Author: gaoyunpeng
 * @Date: 2022-01-04 14:50:22
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="title" :style="{ height: height + 'px' }">
    <slot name="left"></slot>
    <span>{{ titleName }} </span>
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {
  props: {
    titleName: {
      type: String
    },
    height: {
      default: 30,
      type: Number
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(5, 84, 153, 0.4),
    rgba(2, 169, 218, 0.6)
  );
  span {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    @include font_color('title_color');
  }
}
</style>
